<template>
    <div style="padding: 10px;">
        <a-form-model :model="config" layout="vertical" >
            <a-row>
                <a-col :span="12">
                    <a-form-model-item style="margin-bottom: 10px" :label="$ti18('rxForm.name','名称')" >
                        <a-input class="formInput-df" v-model="config.name"></a-input>
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item  style="margin-bottom: 10px"  :label="$ti18('rxForm.rxAlias', '别名')" >
                        <a-input class="formInput-df" v-model="config.alias"></a-input>
                    </a-form-model-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-model-item :label="i18n('form.ctlLayout','控件布局')" style="margin-bottom: 0px">
                        <a-radio-group v-model="config.layout" name="radioGroup" >
                            <a-radio value="vertical">
                                {{i18n('form.vertical','垂直')}}
                            </a-radio>
                            <a-radio value="standard">
                                {{i18n('form.horizontal','水平')}}
                            </a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item :label="i18n('form.filterBtn','筛选按钮')" style="margin-bottom: 0px">
                        <a-switch v-model="config.showButton"/>
                    </a-form-model-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="24">
                    <a-form-model-item :label="i18n('form.control','控件')" style="margin-bottom: 10px">
                        <a-button-group style="margin-bottom: 5px">
                            <a-button class="abutton" @click="addPublish">
                                <i class="iconjia iconfont"></i>
                            </a-button>
                            <a-button class="abutton" @click="delPublish">
                                <i class="icontrash iconfont"></i>
                            </a-button>

                            <a-button class="abutton" @click="moveUp()">
                                <i class="iconshang iconfont"></i>
                            </a-button>

                            <a-button class="abutton" @click="moveDown()">
                                <i class="iconxia iconfont"></i>
                            </a-button>
                        </a-button-group>
                        <a-table
                            :dataSource="config.publish.paramMapping"
                            :rowSelection="publishSelection"
                            rowKey="idx_"
                            :pagination="false"
                            :bordered="true">
                            <a-table-column :width="130" :title="$comi18('rxDialog.name', '标题')" dataIndex="label">
                                <template slot-scope="text, record">
                                    <a-input v-model="record.label"></a-input>
                                </template>
                            </a-table-column>
                            <a-table-column :width="130" :title="$ti18('rxForm.type', '类型')" dataIndex="type">
                                <template slot-scope="text, record">
                                    <a-select
                                        v-model="record.type"
                                        :options="types"
                                        :getPopupContainer="(p) => p.parentNode"
                                        @change="typeChange(record)"
                                        :allowClear="true"
                                    >
                                    </a-select>
                                </template>
                            </a-table-column>
                            <a-table-column :width="70" :title="$ti18('rxList.config','配置')" dataIndex="settings">
                                <template slot-scope="text, record,index">
                                    <a-button size="small" @click="setSettings(record)">{{$ti18('rxList.config','配置')}}</a-button>
                                </template>
                            </a-table-column>
                            <a-table-column :title="i18n('form.style','风格')" dataIndex="stylize">
                                <template slot-scope="text, record,index">
                                    <a-select default-value="1" v-model="record.stylize" :allowClear="true" :getPopupContainer="(p) => p.parentNode">
                                        <a-select-option value="1">1/4</a-select-option>
                                        <a-select-option value="2">1/3</a-select-option>
                                        <a-select-option value="3">2/3</a-select-option>
                                        <a-select-option value="4">1/2</a-select-option>
                                        <a-select-option value="5">1</a-select-option>
                                    </a-select>
                                </template>
                            </a-table-column>
                        </a-table>
                    </a-form-model-item>
                </a-col>
            </a-row>
        </a-form-model>
    </div>
</template>

<script>
import {Util,GridMixin} from "@lowcode/jpaas-common-lib";
import Filters from "../filterController/index"
import ComponentDef from './ComponentDef'

export default {
    name: "filter-component",
    mixins:[GridMixin,ComponentDef],
    data() {
        return {
            config:{
                name:this.i18n('form.filter','筛选器')+Util.randomId(),
                alias:Util.randomId(),
                layout:'standard',//默认水平布局
                showButton:true,
                publish:{
                    paramMapping:[]
                },
            },
            selectedRowKeys:[],
            types:[
                {label:this.i18n('form.textBox','文本框'),value:"text",dataType:"varchar"},
                {label:this.i18n('form.dropDownBox','下拉框'),value:"select",dataType:"varchar"},
                {label:this.i18n('form.numInputBox','数字输入框'),value:"number",dataType:"number"},
                {label:this.i18n('form.month','月份'),value:"month",dataType:"month"},
                {label:this.i18n('form.year','年份'),value:"year",dataType:"year"},
                {label:this.i18n('form.date','日期'),value:"date",dataType:"date"},
                {label:this.i18n('form.dateRange','日期范围'),value:"dateRange",dataType:"varchar"},
                {label:this.i18n('form.dialog','对话框'),value:"dialog",dataType:"varchar"},
                {label:this.i18n('form.selectBox','用户选择框'),value:"user",dataType:"varchar"},
                {label:this.i18n('form.departBox','部门选择框'),value:"group",dataType:"varchar"},
                {label:this.i18n('form.dropTree','下拉树'),value:"tree",dataType:"varchar"},
            ],
            labelCol:{
                span:5
            },
            wrapperCol:{
                span:7
            },
        }
    },
    computed: {
        publishSelection() {
            return {
                selectedRowKeys: this.selectedRowKeys,
                onChange: this.onSelectChange,
            }
        },
    },
    created() {
        this.initConfig();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formComponent", key);
        },
        initConfig(){
            if(this.conf){
                this.config=this.conf;
            }
        },
        addPublish(){
            var key= Util.randomId();
            this.config.publish.paramMapping.push({
                idx_:key,
                key:key,
                label:"",
                type:"",
                settings:"",
                stylize:'1',
            });
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys
        },
        moveUp() {
            this.toUp(this.config.publish.paramMapping, this.selectedRowKeys)
        },
        moveDown() {
            this.toDown(this.config.publish.paramMapping, this.selectedRowKeys);
        },
        delPublish() {
            this.removeRows(this.config.publish.paramMapping, this.selectedRowKeys)
        },
        setSettings(record){
            if(!record.type){
                this.$notification["warning"]({
                    message: this.$ti18('rxMsa.actionTips','操作提示'),
                    description: this.i18n('msg.selectType','请先选择类型！'),
                });
                return ;
            }
            var component = Filters[record.type+"-filter"];
            var  paramMappings =  this.config.publish.paramMapping.filter(res=>{
                if(res.key != record.key){
                    return true;
                }
            })
            var conf = {
                component: component,
                title: this.i18n('list.ctlConfig','控件配置'),
                curVm: this,
                data: {row: record,paramMappings:paramMappings},
                zIndex:9999,
                widthHeight: ['1000px', '650px']
            };
            Util.open(conf, function (action,data) {
                if (action != 'ok') {
                    return;
                }
                let nameValue = ['user','group','tree']
                record.label=data.title;
                record.settings=data.settings;
                if(nameValue.contains(record.type)){
                    record.values = data.value
                }else {
                    record.value = data.value
                }

            });
        },
        typeChange(record){
            record.settings="";
        }
    },
    watch: {
        config: {
            handler: function (val, oldVal) {
                var self=this;
                setTimeout(()=>{  //设置延迟执行
                    self.$emit('dragclick',val, "", self.type);
                },1000);
            },
            deep: true
        }
    }
}
</script>

<style scoped>
.formInput-df{
    width:calc(100% - 20px);
}
</style>